<!--
*@Author: QWP
*@Description: 综合预警
*@Date: 2024-07-08 09:51:28
-->
<template>
  <a-layout class="f-h-100 s-bg-white">
    <a-layout class="f-h-100 s-bg-white">
      <u-table-header>
        <u-form
          :model="searchF"
          :gutter="16"
          :elements="searchEl"
          class="f-w-auto"
          :isSearch="true"
          @formChange="getSearch(1)"
        >
          <a-col>
            <a-space>
              <u-icon-button @click="getSearch(1)">查询</u-icon-button>
            </a-space>
          </a-col>
        </u-form>
      </u-table-header>
      <u-table-content>
        <u-table
          :columns="columns"
          :data="tabData"
          v-model:pagination="pagenation"
          :loading="loading"
          :scroll="{ y: useTableScroll() }"
          @onSelect="({ selectedRows }) => (tabSelData = selectedRows)"
          @onDblclick="
            record => {
              currentRow = record;
              showDispose = true;
            }
          "
          @change="getSearch"
        ></u-table>
      </u-table-content>
    </a-layout>
  </a-layout>
</template>

<script lang="ts" setup>
import { ref, reactive, computed, onMounted, h, watch } from 'vue';
import {
  useRoute,
  useRouter,
  onBeforeRouteUpdate,
  onBeforeRouteLeave,
} from 'vue-router';
import { _IFormEl } from '@/components/common/form/interface';
// import {
//   Row,
//   Button,
//   ColProps,
//   FormItemProps,
//   Space,
//   TableColumnProps,
//   TypographyTitle,
//   Rate,
// } from 'ant-design-vue';
import {
  Button,
  ColProps,
  FormItemProps,
  TableColumnProps,
  Tag,
  Image,
} from 'ant-design-vue';
import { numberC, urlFile } from '@/util/common';
import { _IExtra } from '@/src/components/common/form/interface';
import { useTableScroll } from '@/hooks/useTable';
import * as businessDetailsAPI from '@/service/emergency/businessDetails';

import * as resourceServeTree from '@/service/resource/tree';

const emits = defineEmits(['focusChange']);
const router = useRouter();
const route = useRoute();
const treeExpandes = ref(['fda30684-6473-4fb5-8cdb-0d6001a7dd15']);

let pagenation = reactive({
  total: 0,
  current: 1,
  pageSize: 50,
  showTotal: total => `共 ${total} 条`,
});
const searchF = reactive({
  model: {
    keywords: null,
  },
});
const formItemProps: FormItemProps & _IExtra = {
  labelWidth: '100',
  wrapperCol: { span: 24 },
};
const searchEl: Array<_IFormEl> = [
  {
    label: '关键字',
    key: 'keywords',
    element: 'input',
    col: { span: 4 },
    formItemProps: formItemProps,
    componentProps: { placeholder: '请输入企业名称' },
  },
];

// 列表
const currentRow = ref({});
const loading = ref<boolean>(false);
const tabSelData = ref<any[]>([]);
const tabData = ref<any[]>([]);
let columns: Array<TableColumnProps> = reactive([
  {
    dataIndex: 'ROW_ID',
    title: '序号',
    width: 50,
    align: 'center',
    customRender: ({ text, record, index }) => {
      return index + 1;
    },
  },
  {
    dataIndex: 'entName',
    title: '企业名称',
    width: 300,
  },
  {
    dataIndex: 'unifiedCode',
    title: '统一信用代码 ',
    width: 300,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },

  {
    dataIndex: 'legalPerson',
    title: '法人 ',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'legalPersonPhone',
    title: '法人联系方式 ',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'safetyAdmin',
    title: '安全管理员 ',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'safetyAdminPhone',
    title: '安全管理员联系方式 ',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'operationPlace',
    title: '实际经营地址 ',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'staffNumber',
    title: '从业人数 ',
    width: 100,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'setUpDate',
    title: '组建时间 ',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'busScope',
    title: '经营范围',
    width: 400,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'safetyAdminPerson',
    title: '安全负责人 ',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'safetyAdminPersonPhone',
    title: '安全负责人联系方式 ',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'scale',
    title: '规模 ',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'industryName',
    title: '行业类别 ',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'address',
    title: '地址',
    width: 300,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'areaName',
    title: '行政区域',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },

  {
    dataIndex: 'physicochemical',
    title: '理化性质 ',
    width: 200,
    align: 'center',
    customRender: ({ text, record, index }) => {
      if (text) {
        return text;
      } else {
        return '--';
      }
    },
  },
  {
    dataIndex: 'qrCodeUrl',
    title: '企业二维码 ',
    width: 200,
    customRender: ({ text, record, index }) => {
      // return text;
      return h(Image, { src: text, width: 80 });
    },
  },
  {
    dataIndex: 'ROW_Button',
    title: '操作详情',
    width: 100,
    align: 'center',
    customRender: ({ text, record, index }) => {
      return h(
        Button,
        {
          type: 'link',
          onClick: () => {
            localStorage.setItem('enterpriseFileEntName', record.entName);
            router.push({
              path: '/TransitIndex/enterpriseFile',
              query: {
                _tab: '1',
                label: '企业隐患',
              },
            });
          },
        },
        '隐患详情'
      );
    },
  },

  // { dataIndex: 'updatetime', title: '最后修改时间 ', width: 200 },
]);

onMounted(() => {
  getSearch();
});

// 列表查询
const getSearch = async (current?: number) => {
  loading.value = true;
  try {
    if (current == 1) {
      pagenation.current = 1;
    }
    searchF.model.keywords = searchF.keywords;
    searchF.current = pagenation.current;
    searchF.size = pagenation.pageSize;
    const res = await businessDetailsAPI.getCompany(searchF);
    if (res.code == 0) {
      tabData.value = res.data.records || [];
      pagenation.total = res.data.total;
    }
  } catch (error) {}
  loading.value = false;
};

let showDispose = ref<boolean>(false);
</script>

<style lang="scss" scoped>
.icons-list :deep(.anticon) {
  margin-right: 6px;
  font-size: 24px;
}
</style>
